<template>
  <div>
    <homeHeader />
    <!-- sticky swipeable这个是加入可以左右滑动组件 -->
    <van-tabs v-model="activeTab" sticky swipeable>
      <van-tab v-for="(tabItem,index) in tabList" :key="index" :title="tabItem.name">
        <van-list
          v-model="loading"
          :finished="tabItem.finished"
          finished-text="没有更多了"
          @load="loadMorePost"
          :immediate-check="false"
        >
          <!-- 主页的逻辑复杂,不要让排版影响 -->
          <post :post="post" v-for="(post,index) in tabItem.posts" :key="index" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import homeHeader from "../components/homeHeader";
import post from "../components/post";
export default {
  name: "homepage",
  components: {
    homeHeader,
    post
  },
  data() {
    return {
      // 如果登录了,第一个分类是关注, 没有登录,第一个分类就头条
      activeTab: localStorage.getItem("token") ? 1 : 0,
      tabList: [],
      // 每次加载多少条内容
      pageSize: 10,
      loading: false
    };
  },
  watch: {
    // 监听当前激活分类的 tabIndex 的变化,重新获取文章数据
    activeTab(newActiveTab) {
      // 每次切换 tab 都会触发 ajax 请求
      // 已经请求过的数据,有了 posts 的分类是不需要这个重新请求的
      if (this.tabList[newActiveTab].posts.length == 0) {
        // 如果这个被选中的tabIndex 对应的那个tab 对象里面的posts长度为0
        // 证明没有数据,于是发送ajax请求 不然不用去管
        this.getTabPosts(newActiveTab);
      }
    }
  },
  methods: {
    initTabList() {
      // 判断如果 我的 localStorage 有tabActive 数据
      // 就以这个数据为分类数据,没有情况下,去服务器请求
      if (localStorage.getItem("tabActive")) {
        const data = JSON.parse(localStorage.getItem("tabActive"));

        // 获取的数据放到我们的data 当中
        data.forEach(element => {
          (element.posts = []),
            // 加载页面数,默认值为第一页,加载就加1
            (element.currentPage = 1),
            // 加载函数
            (element.finished = false);
        });
        this.tabList = data;
        // 获取完tab数据,使用默认 tab(头条)获取文章列表数据
        this.getTabPosts(this.activeTab);
      } else {
        // 挂载完毕的钩子函数
        this.$axios({
          url: "/category",
          method: "get"
        }).then(res => {
          // es6 写法
          const { data } = res.data;
          // 获取的数据放到我们的data 当中
          data.forEach(element => {
            (element.posts = []),
              // 加载页面数,默认值为第一页,加载就加1
              (element.currentPage = 1),
              // 加载函数
              (element.finished = false);
          });
          this.tabList = data;
          // 获取完tab数据,使用默认 tab(头条)获取文章列表数据
          this.getTabPosts(this.activeTab);
        });
      }
    },
    loadMorePost() {
      // 每次拉到底部,触发加载函数,把当前的 tab 分类记录在 currentPage 加1
      // 然后触发 ajax 请求获取页面数据
      this.tabList[this.activeTab].currentPage += 1;
      // 发送ajax请求获取新文章
      this.getTabPosts(this.activeTab);
      console.log("触发了加载函数");
    },
    getTabPosts(tabIndex) {
      // 传入 tab 的index 通过data里面的 tabList 数据获取对应的分类id
      const categoryId = this.tabList[tabIndex].id;
      // 根据这个 id 获取对应的分类文章列表
      // 发送ajax请求
      this.$axios({
        url: "/post",
        method: "get",
        // 如果是get请求可以通过 params 的属性来带参数
        params: {
          category: categoryId,
          pageSize: this.pageSize,
          pageIndex: this.tabList[tabIndex].currentPage
        }
      }).then(res => {
        const { data } = res.data;
        // 获取完文章列表数据 追加 tabIndex对应的 tab 对象当中
        // 使用 es6 结构语法拼接
        const newData = [...this.tabList[tabIndex].posts, ...data];
        this.tabList[tabIndex].posts = newData;
        // 数据获取完毕,手动读取状态 this.loading 设置为 false,可以隐藏加载中那几个字
        this.loading = false;
        // 如果获取的 data 数据长度 少于我们设置的每页数据大小 我们就给出提示, 就要将 tab 分类下面记录的那个 finished 设置为 true
        if (data.length < this.pageSize) {
          // 将当前 tab 的 finished 属性修改为 true,避免下次继续触发加载函数
          this.tabList[this.activeTab].finished = true;
        }
      });
    }
  },
  mounted() {
    this.initTabList();
  }
};
</script>

<style>
</style>